<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="/frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="/frame/static/css/style.css">
    <link rel="icon" href="/frame/static/image/code.png">
</head>
<body class="body">

<blockquote class="layui-elem-quote my-btn-box">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn">查询</a>
    </div>
    <div class="layui-inline" shiro:hasPermission="sys:user:save">
        <a class="layui-btn layui-btn-normal usersAdd_btn">添加用户</a>
    </div>

    <div class="layui-inline">
        <a class="layui-btn layui-btn-danger batchDel">批量删除</a>
    </div>

    <div class="layui-inline">
        <a class="layui-btn layui-bg-orange btn-refresh">刷新</a>
    </div>
    <!--<div class="layui-inline">-->
        <!--<div class="layui-form-mid layui-word-aux">　本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>-->
    <!--</div>-->
</blockquote>

<!-- 表格 -->
<div id="dateTable" lay-filter="dataCheck" ></div>

<script type="text/javascript" src="/frame/layui/layui.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript">

    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table','common'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , common = layui.common
          , $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'
            , height: vipTable.getFullHeight()
              ,  skin:'row'
               , even:'true'
             ,   size: 'sm'
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'userId', title: 'ID', width: 50}
                , {field: 'username', title: '用户名', width: 200}
                , {field: 'updateTime', title: '最后登录时间', width: 300}
                , {field: 'ip', title: '最后登录IP', width: 200}
                , {field: 'createTime', title: '创建时间', width: 200}
                , {field: 'status', title: '状态', width: 100 , templet: '#userStatusTpl'}
                , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataCheck'
            , url: '/api/user/list'
            , method: 'get'
            , page: true
            , limits: [10, 20, 30, 40, 50]
            , limit: 10
            , loading: true
        });

        // 获取选中行
        table.on('checkbox(dataCheck)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });
        /**添加用户*/
        $(".usersAdd_btn").click(function(){
            var url = "/module/user/edit";
            common.cmsLayOpen('新增用户',url,'550px','265px');
        });
        // 刷新
        $('.btn-refresh').on('click', function () {
            tableIns.reload();
        });
        /**监听工具条*/
        table.on('tool(dataCheck)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            //修改用户
            if(layEvent === 'edit') {
                var userId = data.userId;
                var url = "/api/user/user_update?userId=" + userId;
                common.cmsLayOpen('编辑用户', url, '550px', '265px');

            }
        });
    });
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn  layui-btn-mini" lay-event="edit" shiro:hasPermission="sys:user:edit" >
        <i class="layui-icon">&#xe642;</i>
    </a>
    <a class="layui-btn  layui-btn-mini" lay-event="detail" shiro:hasPermission="sys:user:list">
        <i class="layui-icon">&#xe615;</i>
    </a>
    <a class="layui-btn  layui-btn-mini" lay-event="del" shiro:hasPermission="sys:user:remove">
        <i class="layui-icon">&#xe640;</i>
    </a>

</script>

<!-- 用户状态tpl-->
<script type="text/html" id="userStatusTpl">
    {{# if(d.status == 0){ }}
    <span class="layui-badge layui-bg-green ">0-有效</span>
    {{# } else if(d.status == 1){ }}
    <span class="layui-badge">1-失效</span>
    {{# } else { }}
    {{d.userStatus}}
    {{# }  }}
</script>


</body>
</html>